<div class="add-package-popover">
  <che-toggle-popover placement="right"
                      is-open="addPackagePopoverController.isOpen"
                      trigger-outside-click="true">
    <div che-multi-transclude-part="button">
      <che-button-primary class="che-list-add-button"
                          che-button-title="Add Package"
                          name="addPackageButton"></che-button-primary>
    </div>
    <div che-multi-transclude-part="popover">
      <form name="addPackageForm">
        <che-input-box che-form="addPackageForm"
                       che-name="packageName"
                       id="packageName"
                       che-label-name="Package name"
                       che-place-holder="Package name"
                       aria-label="Package name"
                       che-width="auto"
                       ng-model="addPackagePopoverController.packageName"
                       focusable
                       required>
        </che-input-box>
        <che-input-box che-form="addPackageForm"
                       che-name="packageLocation"
                       id="packageLocation"
                       che-label-name="Package location"
                       che-place-holder="Package location"
                       aria-label="Package location"
                       che-width="auto"
                       ng-model="addPackagePopoverController.packageLocation"
                       git-url
                       required>
        </che-input-box>
      </form>

      <div class="add-package-button"
           flex layout="row" layout-align="end center">
        <che-button-cancel-flat che-button-title="Cancel"
                                id="cancel-button"
                                name="cancelButton"
                                ng-click="addPackagePopoverController.close()"></che-button-cancel-flat>
        <che-button-primary che-button-title="Add"
                            id="add-package-button"
                            name="addButton"
                            ng-disabled="addPackageForm.$invalid"
                            ng-click="addPackagePopoverController.addPackage()"></che-button-primary>
      </div>

    </div>
  </che-toggle-popover>
</div>
